import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { CustomTooltip } from "./tooltip";

const data = Array.from({ length: 7 }, (_, i) => ({
	number: `#${i + 1}`,
	bug: Math.floor(Math.random() * 100),
	script: Math.floor(Math.random() * 100),
	env: Math.floor(Math.random() * 100),
}));

export function IssuesChart() {
	return (
		<Card className="gap-4">
			<CardHeader>
				<CardTitle className="flex justify-between">
					<span>Issues Distribution</span>
					<div className="flex items-center gap-3">
						<span>32 K</span>
						<Separator
							orientation="vertical"
							className="data-[orientation=vertical]:h-4"
						/>
						<span className="text-destructive">32 K</span>
					</div>
				</CardTitle>
				<CardDescription>
					Showing total visitors for the last 6 months
				</CardDescription>
			</CardHeader>
			<CardContent className="h-full">
				<ResponsiveContainer height="100%" width="100%" debounce={200}>
					<BarChart
						accessibilityLayer
						data={data}
						margin={{
							left: 0,
							right: 0,
							bottom: 0,
							top: 0,
						}}
					>
						<XAxis
							dataKey="number"
							tickLine={false}
							axisLine={false}
							tickFormatter={(value) => value.slice(0, 3)}
							height={20}
							tick={{
								fontSize: 12,
								fontWeight: 400,
								fill: "var(--color-muted-foreground)",
							}}
						/>
						<Tooltip
							cursor={{ fill: "var(--color-muted)", radius: 6 }}
							content={<CustomTooltip />}
						/>
						<Bar dataKey="env" fill="var(--color-chart-1)" radius={4} />
						<Bar dataKey="bug" fill="var(--color-chart-3)" radius={4} />
						<Bar dataKey="script" fill="var(--color-destructive)" radius={4} />
					</BarChart>
				</ResponsiveContainer>
			</CardContent>
		</Card>
	);
}
